<template>
	<view class="content">
		<view class="header">
			<view class="user">
				<u-badge type="error" :absolute="true" :offset="[0, 0]" max="99" :value="inCarSum"></u-badge>
				<view class="user-h" @click="selectCar">
					<view class="sub-head">
						<text class="sub-head-key">编号:</text>
						<input v-model="vehicleCode" @click.stop="" @input="checkSpot" class="sub-head-value" type="number" placeholder="车辆编号" />
					</view>
					<text class="sub-head-more">更多</text>
				</view>
				<view class="sub-row">
					<view class="sub-row-cell">
						<text class="sub-row-cell-key">司机:</text>
						<text class="sub-row-cell-value">{{ operator == null ? '' : carItem.driverName }}</text>
					</view>
					<view class="sub-row-cell2">
						<text class="sub-row-cell-key">车牌号:</text>
						<text class="sub-row-cell-value">{{ operator == null ? '' : carItem.plateNumber }}</text>
					</view>
				</view>
				<view class="sub-row">
					<view class="sub-row-cell">
						<text class="sub-row-cell-key">业务员:</text>
						<text class="sub-row-cell-value">{{ carItem == null ? '' : operator.userName }}</text>
					</view>
					<view class="sub-row-cell2">
						<text class="sub-row-cell-key">线路:</text>
						<text class="sub-row-cell-value">{{ operator == null ? '' : carItem.lineName }}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="row" v-if="carItem">
			<view class="row-nav">行车三检</view>
			<view class="row-cell">
				<text :style="'color:' + (checkThree.before == 0 ? '#1f1f1f' : '#e24739')">行车前检查</text>
				<u-switch inactive-color="#e24739" active-color="#1a90e4" :active-value="0" :inactive-value="1" v-model="checkThree.before"></u-switch>
			</view>
			<view class="row-cell">
				<text :style="'color:' + (checkThree.mid == 0 ? '#1f1f1f' : '#e24739')">行车途中检查</text>
				<u-switch inactive-color="#e24739" active-color="#1a90e4" :active-value="0" :inactive-value="1" v-model="checkThree.mid"></u-switch>
			</view>
			<view class="row-cell">
				<text :style="'color:' + (checkThree.after == 0 ? '#1f1f1f' : '#e24739')">收车后中检查</text>
				<u-switch inactive-color="#e24739" active-color="#1a90e4" :active-value="0" :inactive-value="1" v-model="checkThree.after"></u-switch>
			</view>
			<view class="row-nav">发车安全承诺</view>
			<view class="row-cell">
				<text :style="'color:' + (checkBefore.safe == 0 ? '#1f1f1f' : '#e24739')">是否安全告知</text>
				<u-switch inactive-color="#e24739" active-color="#1a90e4" :active-value="0" :inactive-value="1" v-model="checkBefore.safe"></u-switch>
			</view>
			<view class="row-cell">
				<text :style="'color:' + (checkBefore.belt == 0 ? '#1f1f1f' : '#e24739')">是否督促系安全带</text>
				<u-switch inactive-color="#e24739" active-color="#1a90e4" :active-value="0" :inactive-value="1" v-model="checkBefore.belt"></u-switch>
			</view>
			<view class="row-nav">站点载客统计</view>
			<view class="row-cell">
				<text>车辆核载人数</text>
				<u-number-box v-model="men_seat" color="#888888" integer :min="0" disabled></u-number-box>
			</view>
			<view class="row-cell">
				<text>车上全票人数</text>
				<u-number-box v-model="men_all" color="#1a90e4" integer :min="0"></u-number-box>
			</view>
			<view class="row-cell">
				<text>车上半票人数</text>
				<u-number-box v-model="men_half" color="#1a90e4" integer :min="0"></u-number-box>
			</view>
			<view class="row-cell">
				<text>车上免票人数</text>
				<u-number-box v-model="men_free" color="#1a90e4" integer :min="0"></u-number-box>
			</view>
		</view>
		<empty class="row" v-else></empty>
		<view class="footer">
			<button class="btn-commit" type="primary" @click="submitData">提交</button>
		</view>
		<tabBar></tabBar>
	</view>
</template>

<script>
import { mapGetters } from 'vuex';
import tabBar from '@/components/tabBar.vue';
import empty from '@/components/empty.vue';
import common from '@/utils/common.js';
import globaljs from '@/api/global.js';
import countjs from '@/api/count.js';
export default {
	components: {
		tabBar,
		empty
	},
	computed: { ...mapGetters(['operator', 'token']) },
	methods: {
		//行车三检
		checkThreeString() {
			this.checkThree.result = this.checkThree.before + this.checkThree.mid + this.checkThree.after;
			return JSON.stringify(this.checkThree);
		},
		checkBeforeString() {
			this.checkBefore.result = this.checkBefore.safe + this.checkBefore.belt;
			return JSON.stringify(this.checkBefore);
		},
		submitData() {
			if (!this.carItem) {
				uni.$u.toast('请先选择要操作的车辆');
				return;
			}
			if (
				this.men_all > this.men_seat + 10 ||
				this.men_half > this.men_seat + 10 ||
				this.men_free > this.men_seat + 10 ||
				this.men_all + this.men_half + this.men_free > this.men_seat + 10
			) {
				uni.$u.toast('人数超过车辆核载,请确认');
				return;
			}
			let that = this;
			that.checkBeforeStr = that.checkBeforeString();
			that.checkThreeStr = that.checkThreeString();
			uni.showModal({
				title: '温馨提示',
				content: '确认要提交数据吗?',
				success: async function (res) {
					if (res.confirm) {
						let param = {
							checkBefore: that.checkBeforeStr,
							checkThree: that.checkThreeStr,
							cnt1: that.men_all,
							cnt2: that.men_half,
							cnt3: that.men_free,
							id: that.carItem.id,
							stationId: that.carItem.stationId,
							taskId: that.carItem.taskId,
							token: that.token,
							userId: that.operator.userId
						};
						let res = await countjs.countOrderSave(param);
						if (common.httpIsWrong(res)) return;
						that.vehicleCode = '';
						that.carItem = null;
						uni.$u.toast('提交成功');
					}
				}
			});
		},
		selectCar() {
			uni.navigateTo({
				url: '/pages/incarlist/incarlist?getType=1'
			});
		},
		async initPage() {
			await this.getInCarSum();
			await this.checkSpot();
		},
		//初始加载入站车辆数量
		async getInCarSum() {
			let param = {
				stationId: this.operator.stationId,
				token: this.token,
				userId: this.operator.userId,
				getType: 1
			};
			let res = await globaljs.getInStationCar(param);
			if (common.httpIsWrong(res)) return;
			this.inCarSum = res.json.data.data.length;
			if (this.inCarSum == 0) {
				this.carItem = null;
				return;
			}
			this.men_seat = res.json.data.data[0].vehicleSeats;
		},
		//查询指定入站车辆
		async checkSpot() {
			if (!this.vehicleCode) {
				this.carItem = null;
				return;
			}
			let param = {
				stationId: this.operator.stationId,
				token: this.token,
				userId: this.operator.userId,
				vehicleCode: this.vehicleCode,
				getType: 1
			};
			let res = await globaljs.getInStationCar(param);
			if (common.httpIsWrong(res)) {
				this.carItem = null;
				return;
			}
			if (res.json.data.data.length == 0) {
				this.carItem = null;
				return;
			}
			this.carItem = res.json.data.data[0];
			this.men_seat = res.json.data.data[0].vehicleSeats || 0;
			this.men_all = res.json.data.data[0].checkOutCnt1 || 0;
			this.men_half = res.json.data.data[0].checkOutCnt2 || 0;
			this.men_free = res.json.data.data[0].checkOutCnt3 || 0;
			if (res.json.data.data[0].checkThree) this.checkThree = JSON.parse(res.json.data.data[0].checkThree);
			if (res.json.data.data[0].checkBefore) this.checkBefore = JSON.parse(res.json.data.data[0].checkBefore);
		}
	},
	onShow() {
		this.initPage();
	},
	async onPullDownRefresh() {
		await this.initPage();
		uni.stopPullDownRefresh();
		uni.showToast({
			icon: 'none',
			title: '刷新成功',
			duration: 300
		});
	},
	onLoad() {
		// #ifdef MP
		//未登录转登录页面，已登录转主页面
		if (!this.$store.dispatch('checkIndentity')) return;
		uni.setNavigationBarTitle({ title: this.operator.stationName + '-电子路单' });
		// #endif
		// #ifndef MP
		uni.hideTabBar();
		// #endif
	},
	data() {
		return {
			inCarSum: 0, //入站车辆数
			vehicleCode: '', //车辆编号
			carItem: null, //车辆信息
			men_seat: 0,
			men_all: 0,
			men_half: 0,
			men_free: 0,
			checkBefore: {
				safe: 0,
				belt: 0
			},
			checkBeforeStr: '',
			checkThree: {
				before: 0,
				mid: 0,
				after: 0
			},
			checkThreeStr: ''
		};
	}
};
</script>

<style lang="scss">
uni-page-body,
page {
	background-color: #ffffff;
}
.content {
	height: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	background-color: white;
	overflow: scroll;
	padding-bottom: 110rpx;
	.header {
		width: 100%;
		background-color: #ffffff;
		.user {
			margin: 10rpx 10rpx;
			border: solid 1rpx #1a90e4;
			border-radius: 10rpx;
			.user-h {
				display: flex;
				justify-content: space-between;
				padding: 0 20rpx;
				font-size: 30rpx;
				align-items: center;
				background-color: #3c9cff;
				color: white;
				height: 90rpx;
				font-size: 36rpx;
				.sub-head-more {
					letter-spacing: 10rpx;
				}
				.sub-head {
					width: 55%;
					display: flex;
					align-items: center;
					.sub-head-key {
						width: 120rpx;
						letter-spacing: 10rpx;
					}
					.sub-head-value {
						flex: 1;
						color: #3c9cff;
						font-size: 36rpx;
						letter-spacing: 10rpx;
						background-color: white;
						border-radius: 10rpx;
						text-align: center;
						height: 80rpx;
					}
				}
			}
			.sub-row {
				display: flex;
				align-items: center;
				margin: 20rpx 20rpx;
				font-size: 30rpx;
				.sub-row-cell {
					width: 45%;
				}
				.sub-row-cell2 {
					flex: 1;
				}
				.sub-row-cell-key {
					width: 400rpx;
				}
				.sub-row-cell-value {
					color: #1a90e4;
					margin: 0 20rpx;
				}
			}
			.cell {
				display: flex;
				width: 50%;
				height: 80rpx;
				display: flex;
				align-items: center;
				.cell-key-s {
					width: 150rpx;
					text-align-last: justify;
					color: #9de2ff;
				}
				.cell-key {
					width: 150rpx;
					color: #ffffff;
					text-align-last: justify;
				}
				.cell-value {
					flex: 1;
					border-bottom: solid 1rpx #ffffff;
					text-align: center;
					color: #55ffff;
				}
			}
		}
	}
	.row {
		width: 100%;
		.row-nav {
			display: flex;
			align-items: center;
			height: 90rpx;
			background-color: #d8e1ff;
			padding: 0 20rpx;
		}
		.row-cell {
			display: flex;
			align-items: center;
			height: 80rpx;
			background-color: #fff;
			justify-content: space-between;
			padding: 0 40rpx;
			.cell-num {
				border-bottom: solid 1px #dadada;
				width: 130rpx;
				text-align: right;
			}
		}
	}
	.footer {
		width: 100%;
		position: fixed;
		bottom: 100rpx;
		.btn-commit {
			width: 98%;
			background-color: #1a90e4;
		}
	}
}
</style>
